<template>
  <div>
    <el-card class="box-card">
      <el-form ref="form" :model="form" label-width="80px">
        <div style="display: flex">
          <el-form-item label="标签名称">
            <el-input
              v-model="form.tagName"
              style="width: 270px"
              placeholder="根据标题搜索"
            />
          </el-form-item>
          <el-form-item label="状态">
            <el-select
              v-model="form.state"
              style="width: 270px"
              placeholder="请选择"
            >
              <el-option label="启用" value="1" />
              <el-option label="禁用" value="0" />
            </el-select>
          </el-form-item>

          <el-button
            style="margin-left: 40px; height: 40px"
            @click="searchLabelList()"
            >搜索</el-button
          >
          <el-button
            style="margin-left: 10px; height: 40px"
            type="primary"
            @click="resetSearchLabelList()"
            >清除</el-button
          >
          <el-button
            type="success"
            class="addgreen"
            @click="openAddLabelDialog()"
          >
            <i class="el-icon-edit" />
            新增标签
          </el-button>
        </div>
      </el-form>
      <!--  -->
      <el-alert
        :title="`数据一共${total}条`"
        type="info"
        :closable="false"
        show-icon
      />
      <!--  -->
      <el-table :data="tableData" class="eltable">
        <el-table-column
          type="index"
          :index="indexFn"
          label="序号"
          width="130"
        />
        <el-table-column prop="subjectName" label="所属学科" width="230" />
        <el-table-column prop="tagName" label="标签名称" />
        <el-table-column prop="username" label="创建者" width="140" />
        <el-table-column prop="addDate" label="创建日期" width="180">
          <template #default="{ row }">
            <span>{{ row.addDate | formatTime('YYYY-MM-DD') }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="state" label="状态" width="190">
          <template #default="{ row }">
            <span>{{ row.state === 1 ? '启用' : '禁用' }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <template #default="{ row }">
            <el-button type="text" @click="editState(row.id, row.state)">{{
              row.state === 1 ? '禁用' : '启用'
            }}</el-button>
            <span v-if="row.state === 0" style="margin-left: 15px">
              <el-button disabled type="text" @click="editLabel(row.id)">
                修改
              </el-button>
              <el-button disabled type="text" @click="delLabel(row.id)">
                删除
              </el-button>
            </span>
            <span v-else style="margin-left: 15px">
              <el-button type="text" @click="editLabel(row.id)">修改</el-button>
              <el-button type="text" @click="delLabel(row.id)">删除</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination
          :current-page="page"
          :page-sizes="[2, 5, 10, 15]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!--  -->
      <el-dialog
        :title="title"
        :visible.sync="dialogFormVisible"
        @close="closeAddlabelDialog()"
      >
        <el-form :model="addlabelForm">
          <el-form-item
            style="width: 480px"
            label="所属学科"
            :label-width="LabelWidth"
          >
            <el-select v-model="addlabelForm.subjectID" placeholder="请选择">
              <el-option
                v-for="item in list"
                :key="item.id"
                :label="item.subjectName"
                :value="item.subjectID"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            style="width: 330px"
            label="目录名称"
            :label-width="formLabelWidth"
          >
            <el-input
              v-model="addlabelForm.tagName"
              autocomplete="off"
              placeholder="请输入目录名称"
            />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="closeAddlabelDialog()">取 消</el-button>
          <el-button type="primary" @click="submitlabel">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import {
  getLabelListApi,
  delLabelListApi,
  editLabelListApi,
  showLabelDetailApi,
  addLabelListApi,
  labelStateApi,
  getSearchListApi,
  getLabelListsApi
} from '@/api/label'

export default {
  components: {},
  props: {},
  data() {
    return {
      form: {
        tagName: '',
        state: '1',
        oldPassword: 123456,
        newPassword: 654321,
        pagesize: 5,
        page: 1
      },
      tableData: [],
      list: [],
      total: 5,
      pagesize: 5,
      page: 1,
      oldPassword: 123456,
      newPassword: 654321,
      dialogFormVisible: false,
      title: '111',
      formLabelWidth: '80px',
      LabelWidth: '80px',
      addlabelForm: {
        tagName: '',
        subjectID: ''
      },
      id: this.$route.query.id
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getLabelList()
  },

  mounted() {},
  methods: {
    async searchLabelLists() {
      const res = await getLabelListsApi(this.id)
      console.log(res)
      this.tableData = res.items
      this.total = res.counts
    },
    async getLabelList() {
      if (this.id) {
        this.searchLabelLists()
      } else {
        const res = await getLabelListApi(
          this.pagesize,
          this.page,
          this.oldPassword,
          this.newPassword
        )
        // console.log(res)
        this.tableData = res.items
        this.total = res.counts
      }
    },
    indexFn(index) {
      return index + 1 + (this.page - 1) * this.pagesize
    },
    handleSizeChange(val) {
      this.pagesize = val
      this.page = 1
      this.getLabelList()
    },
    handleCurrentChange(val) {
      this.page = val
      this.getLabelList()
    },
    async openAddLabelDialog() {
      const res = await getLabelListApi(
        this.total,
        this.page,
        this.oldPassword,
        this.newPassword
      )
      this.dialogFormVisible = true
      this.list = res.items
      this.title = '新增标签'
      // console.log(this.list)
    },
    closeAddlabelDialog() {
      this.dialogFormVisible = false
      this.getLabelList()
      this.addlabelForm = {
        tagName: '',
        subjectID: ''
      }
    },
    async submitlabel() {
      if (this.addlabelForm.id) {
        await editLabelListApi(this.addlabelForm)
        this.$message.success('编辑成功')
      } else {
        await addLabelListApi(this.addlabelForm)
        console.log(this.addlabelForm)
        this.$message.success('新增成功')
      }

      this.getLabelList()
      this.dialogFormVisible = false
    },
    delLabel(id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await delLabelListApi(id)
          this.getLabelList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async editLabel(id) {
      this.dialogFormVisible = true
      this.title = '修改标签'
      const res = await showLabelDetailApi(id)
      this.addlabelForm = res
      // console.log(res)
      const resu = await getLabelListApi(
        this.total,
        this.page,
        this.oldPassword,
        this.newPassword
      )
      this.list = resu.items
    },
    async editState(id, state) {
      let status = 0
      if (state === 1) {
        status = 0
      } else {
        status = 1
      }
      await labelStateApi(id, status)
      this.getLabelList()
    },
    async searchLabelList() {
      const res = await getSearchListApi(this.form)
      console.log(res)
      this.tableData = res.items
    },
    resetSearchLabelList() {
      this.form = {
        tagName: '',
        state: '1'
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.addgreen {
  margin-left: 340px;
  height: 40px;
}
.block {
  float: right;
  margin: 20px 0;
}
::v-deep .el-dialog__header {
  background-color: #409eff;
}
::v-deep .el-dialog__title {
  color: #fff;
}

::v-deep .el-dialog__headerbtn .el-icon-close:before {
  color: #fff;
}
::v-deep .el-dialog__body {
  padding: 30px;
}
::v-deep .el-dialog {
  width: 400px;
  border-radius: 18px;
}
::v-deep .el-dialog__header {
  border-radius: 18px 18px 0 0;
}
</style>
